<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=a2mxOoZ8cIHNQ5ZE4VlyCpN1nmIQSSF3"></script>
    <title>测距</title>
</head>
<body>
<h3>Map Test</h3>
<div id="allmap"></div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");  // 创建Map实例
    map.centerAndZoom("重庆", 12);     //初始化地图,设置城市和地图级别。
    var pointA = new BMap.Point(106.486654, 29.490295);  // 创建点坐标A--大渡口区
    var pointB = new BMap.Point(106.581515, 29.615467);  // 创建点坐标B--江北区
    alert('从大渡口区到江北区的距离是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  //获取两点距离,保留小数点后两位
    var polyline = new BMap.Polyline([pointA, pointB], {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5}); //定义折线
    map.addOverlay(polyline);   //添加折线到地图上
</script>
</body>
</html>
